<template>
  <view class="agreementReading">
    <view class="agreementReading-title">{{ title }}</view>

    <view>
      <u-parse class="rich-txt" :content="content"></u-parse>
    </view>
  </view>
</template>
<script>
import { getArticleDetails } from '@/api/join';
import uParse from '@/components/feng-parse/parse.vue';
export default {
  components: {
    uParse
  },
  data() {
    return {
      title: '',
      content: ''
    };
  },
  onLoad(options) {
    let appSourceQuery = uni.getStorageSync('appSourceQuery');
    if (options && options.articleId) {
      this.init(options.articleId);
    } else if (appSourceQuery && appSourceQuery.articleId) {
      this.init(appSourceQuery.articleId);
    }
  },
  methods: {
    async init(id) {
      uni.showLoading({
        title: '加载中'
      });
      const res = await getArticleDetails(id);
      if (res) {
        this.title = res.data.title;
        this.content = res.data.content;
        this.content = this.replaceSpecialChar(this.content);
        setTimeout(() => {
          uni.hideLoading();
        }, 300);
      } else {
        uni.showModal({
          title: '提示',
          content: '获取文章失败'
        });
      }
    },
    replaceSpecialChar(detail) {
      let content = detail.replace(/<img[^>]*>/gi, function (match, capture) {
        let matchs = match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/gi, '');
        return matchs;
      });
      return content;
    },
    // getNode(e) {
    //   console.log(e.target.dataset.nodes);
    //   let contentimg = e.target.dataset.nodes;
    //   let imgs = contentimg.match(/<img[^>]+>/g); // 把img所有节点的图片选择出来
    //   let arrImg = [];
    //   // 遍历标签拼拿到你的图片的src里面的内容放在我们数组中
    //   for (let j = 0; j < imgs.length; j++) {
    //     imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
    //       arrImg.push(capture);
    //     });
    //   }
    //   // 最后一步就是把我们的所有图片放在预览的api中就可以了
    //   uni.previewImage({
    //     current: arrImg,
    //     urls: arrImg
    //   });
    // },
    getImgSrc(richtext) {
      let imgList = [];
      richtext.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
        imgList.push(capture);
      });
      return imgList;
    }
  }
};
</script>

<style lang="scss" scoped>
.agreementReading {
  margin: 24rpx;
  overflow-x: hidden;
  background: white;
  padding: 24rpx;
  border-radius: 24rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  &-title {
    font-size: 38rpx;
    font-weight: bold;
    margin: 24rpx 0;
    text-align: center;
  }
  .rich-txt {
    font-size: 28rpx;
  }
}
</style>
